<script setup lang="ts">
import { reactive, ref } from "vue"
import { dictDataAddApi, dictDataEditApi } from "@/api/conventional"
import { ElMessage } from "element-plus"

const dialogFormVisible = ref(false)
const formLabelWidth = "140px"
const pageType = ref<string>("create")

const form = reactive({
  type_code: "",
  data_name: "",
  data_code: "",
  data_value: "",
  description: "",
  status: 2
})

//#region 增
const handleCreate = async () => {
  await dictDataAddApi(form).then(() => {
    ElMessage.success("操作成功")
  })
}
//#endregion

//#region 改
const currentUpdateId = ref<undefined | number>(undefined)
const handleUpdate = (el: any) => {
  currentUpdateId.value = el.id
  form.type_code = el.type_code
  form.data_name = el.data_name
  form.data_code = el.data_code
  form.data_value = el.data_value
  form.description = el.description
  form.status = el.status
}

const handleUpdateSubmit = async () => {
  await dictDataEditApi({
    id: currentUpdateId.value,
    type_code: form.type_code,
    data_name: form.data_name,
    data_code: form.data_code,
    data_value: form.data_value,
    description: form.description,
    status: form.status
  }).then(() => {
    ElMessage.success("修改成功")
  })
}
//#endregion

const handleSubmit = async () => {
  console.log(form)
  if (pageType.value == "create") {
    await handleCreate()
  } else {
    await handleUpdateSubmit()
  }
  resetForm()

  dialogFormVisible.value = false
  emit("doSth", true)
}

const resetForm = () => {
  currentUpdateId.value = undefined
  form.data_name = ""
  form.data_code = ""
  form.data_value = ""
  form.description = ""
  form.status = 2
}

const showClick = (val: any) => {
  console.log("子组件方法")
  console.log(val)
  form.type_code = val.type_code
  if ("id" in val) {
    pageType.value = "edit"
    handleUpdate(val)
  } else {
    pageType.value = "create"
    resetForm()
  }
  dialogFormVisible.value = true
}
defineExpose({ showClick }) //暴露子组件的方法或者数据
const emit = defineEmits(["doSth"])
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="操作" destroy-on-close append-to-body>
    <el-form :model="form">
      <el-form-item label="字典类型" :label-width="formLabelWidth">
        <el-input v-model="form.type_code" disabled autocomplete="off" />
      </el-form-item>
      <el-form-item label="数据名称" :label-width="formLabelWidth">
        <el-input v-model="form.data_name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数据类型" :label-width="formLabelWidth">
        <el-input v-model="form.data_code" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数据值" :label-width="formLabelWidth">
        <el-input v-model="form.data_value" autocomplete="off" />
      </el-form-item>
      <el-form-item prop="description" label="备注" :label-width="formLabelWidth">
        <el-input type="textarea" :autosize="{ minRows: 2 }" v-model="form.description" placeholder="请输入" />
      </el-form-item>
      <el-form-item prop="status" label="启用" :label-width="formLabelWidth">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
